<template>
  <div class="form-box">
    <a-form-model class="form" layout="vertical" :model="form">
      <sectionTitle>基本详情</sectionTitle>
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="标题" required>
            <a-input v-model="form.name" placeholder="请输入标题" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="流水号">
            <a-input v-model="form.name" placeholder="请输入标题" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="案号" required>
            <a-input v-model="form.name" placeholder="请输入标题" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="所属届次">
            <span>{{ form.sessionId }}</span>
            <!-- <s-select
              v-else
              :selectOption="proposal.proposalSessionId"
              v-model="form.sessionId"
            /> -->
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="会中提案" required>
            <span v-if="type == 'proof'">{{ form.sessionId }}</span>
            <a-radio-group
              v-else
              :options="plainOptions"
              v-model="form.region"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="提案者类型">
            <span>{{ form.region }}</span>
            <!-- <a-radio-group
              v-else
              :options="plainOptions"
              v-model="form.region"
            /> -->
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="提案者" required>
            <span>{{ form.name }}</span>
            <!-- <a-input v-else v-model="form.name" /> -->
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="界别">
            <span>{{ form.name }}</span>
            <!-- <a-input v-else disabled v-model="form.name" /> -->
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="党派" required>
            <span>{{ form.name }}</span>
            <!-- <a-input v-else disabled v-model="form.name" /> -->
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="联系地址" required>
            <span>{{ form.name }}</span>
            <!-- <a-input
              v-else
              disabled
              v-model="form.name"
              placeholder="请输入标题"
            /> -->
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="联系电话" required>
            <span>{{ form.name }}</span>
            <!-- <a-input
              v-else
              disabled
              v-model="form.name"
              placeholder="请输入标题"
            /> -->
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="联名人" required>
            <span>{{ form.name }}</span>
            <!-- <a-input
              v-else
              disabled
              v-model="form.name"
              placeholder="请输入标题"
            /> -->
          </a-form-model-item>
        </a-col>
      </a-row>
      <sectionTitle>提案内容</sectionTitle>
      <a-form-model-item label="通知内容" required>
        <a-input v-model="form.desc" type="textarea" />
      </a-form-model-item>
      <a-form-model-item label="附件">
        <a-upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :multiple="true"
          :file-list="fileList"
          @change="handleChange"
        >
          <a-button v-if="type == 'receive'">
            <a-icon type="upload" /> Upload
          </a-button>
        </a-upload>
      </a-form-model-item>
      <sectionTitle>更多信息</sectionTitle>
      <!-- <a-form-model-item label="联名提案" required>
        <a-radio-group :options="plainOptions" v-model="form.lm" />
        <a-input
          addon-before="联名者"
          style="width: calc(100% - 220px); margin-left: 100px"
          v-show="form.lm === '1'"
          v-model="form.name"
        />
      </a-form-model-item> -->
      <a-form-model-item label="同意公开" required>
        <a-radio-group
          v-if="type != 'proof'"
          :options="plainOptions"
          v-model="form.region"
        />
        <span v-else>{{ form.region }}</span>
      </a-form-model-item>
      <a-form-model-item label="内容公开" required>
        <a-radio-group
          v-if="type != 'proof'"
          :options="plainOptions"
          v-model="form.region"
        />
        <span v-else>{{ form.region }}</span>
      </a-form-model-item>
      <a-form-model-item label="经过调研" required>
        <a-radio-group
          v-if="type != 'proof'"
          :options="plainOptions"
          v-model="form.dy"
        />
        <span v-else>{{ form.region }}</span>
        <a-input
          addon-before="调研过程"
          style="width: calc(100% - 220px); margin-left: 100px"
          v-if="type != 'proof'"
          v-show="form.dy === '1'"
          v-model="form.name"
        />
        <span v-else>{{ form.name }}</span>
      </a-form-model-item>
      <a-form-model-item label="第一次提出" required>
        <a-radio-group
          v-if="type != 'proof'"
          :options="plainOptions"
          v-model="form.region"
        />
        <span v-else>{{ form.region }}</span>
      </a-form-model-item>
      <a-form-model-item label="由本人撰写" required>
        <a-radio-group
          v-if="type != 'proof'"
          :options="plainOptions"
          v-model="form.region"
        />
        <span v-else>{{ form.region }}</span>
      </a-form-model-item>
      <a-form-model-item label="需要办理的协商方式" required>
        <a-checkbox-group
          v-if="type != 'proof'"
          :options="plainOptions"
          v-model="form.type"
        />
        <span v-else>{{ form.region }}</span>
      </a-form-model-item>
      <a-form-model-item label="建议的承办单位" required>
        <a-input
          v-if="type != 'proof'"
          v-model="form.name"
          placeholder="请输入标题"
        />
        <span v-else>{{ form.region }}</span>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="onSubmit"> 提交 </a-button>
        <a-button style="margin-left: 10px" @click="$router.back()">
          退回
        </a-button>
        <a-button style="margin-left: 10px" @click="$router.back()">
          暂存
        </a-button>
        <a-button style="margin-left: 10px" @click="$router.back()">
          返回
        </a-button>
      </a-form-model-item>
    </a-form-model>
    <choice-modal :visible.sync="choiceVisible" />
  </div>
</template>
<script>
import sectionTitle from 'components/base/sectionTitle'
import choiceModal from 'components/base/choiceModal'
import { proposal } from 'assets/js/select-option-list'
export default {
  data() {
    return {
      plainOptions: [
        { label: '是', value: '1' },
        { label: '否', value: '0' }
      ],
      form: {
        name: undefined,
        region: undefined,
        lm: '0',
        dy: '0',
        date1: undefined,
        delivery: false,
        type: undefined,
        resource: '',
        desc: '',
        sessionId: undefined
      },
      fileList: [
        {
          uid: '-1',
          name: 'xxx.png',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png'
        }
      ],
      choiceVisible: false,
      type: this.$route.meta.type,
      proposal
    }
  },
  props: {
    id: null
  },
  created() {
    console.log(this.type)
  },
  components: { sectionTitle, choiceModal },
  methods: {
    onSubmit() {
      this.choiceVisible = true
      console.log('submit!', this.form)
    },
    handleChange(info) {
      let fileList = [...info.fileList]

      // 1. Limit the number of uploaded files
      //    Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-2)

      // 2. read from response and show file link
      fileList = fileList.map((file) => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url
        }
        return file
      })

      this.fileList = fileList
    }
  }
}
</script>
<style lang="less" scoped>
.ant-input[disabled] {
  color: rgba(0, 0, 0, 0.65);
}
</style>